<template>
  <div>
    <t-card>
      <t-form :data="serchFormData" layout="inline">
        <t-form-item label="渠道名称" name="channelName">
          <t-input v-model="serchFormData.channelName" placeholder="请输入渠道名称" type="search" />
        </t-form-item>
        <t-form-item label="渠道状态" name="enabled">
          <t-select v-model="serchFormData.enabled" placeholder="请选择渠道状态" clearable>
            <t-option v-for="item in EnabledStatus" :key="item" :label="enabledStatusDict[item]" :value="item" />
          </t-select>
        </t-form-item>

        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />
      <div class="add-channel">
        <t-button @click="handleAddChannelClick">
          添加渠道
        </t-button>
      </div>
      <!-- @vue-expect-error -->
      <t-table :data="data" :columns="columns" row-key="id" :pagination="pagination" cell-empty-content="-" :loading="dataLoading">
        <template #op="{ row }">
          <t-row align="center" :gutter="8">
            <t-button @click="handleEditChannelClick(row)">
              编辑
            </t-button>
          </t-row>
        </template>
      </t-table>
    </t-card>
    <channel-form-dialog
      :id="editBatchId" v-model:visible="channelFormDialogVisible"
      :data="channelFormDialogData"
      @success="handleSuccess"
    />
  </div>
</template>
<script setup lang="tsx">
import type { PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import { getChannelPageList } from '@/api/channel'
import type { ChannelRes } from '@/api/model/channel'
import { ChannelSettType } from '@/api/model/channel'
import { EnabledStatus } from '@/api/model/common'
import { channelSettTypeDict } from '@/utils/dict/channel'
import { enabledStatusDict } from '@/utils/dict/common'

import type { ChannelFormDialogData } from './component/ChannelFormDialog.vue'
import ChannelFormDialog from './component/ChannelFormDialog.vue'

export type TableData = ChannelRes
const serchFormData = reactive({
  channelName: '',
  enabled: '' as EnabledStatus | '',
})
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 15,
  total: 0,
})
const data = ref<TableProps<TableData>['data']>([])
const columns: TableProps<TableData>['columns'] = [
  {
    colKey: 'companyName',
    title: '渠道名称',
  },
  {
    colKey: 'phone',
    title: '联系电话',
  },
  {
    colKey: 'contactPerson',
    title: '联系人',
  },
  {
    colKey: 'settType',
    title: '结算方式',
    cell(_, props) {
      return channelSettTypeDict[props.row.settType]
    },
  },
  {
    colKey: 'enabled',
    title: '状态',
    cell(_, props) {
      return props.row.enabled === EnabledStatus.ENABLED ? '启用' : '禁用'
    },
  },
  {
    colKey: 'op',
    title: '操作',
  },
]

const dataLoading = ref(false)
function fetchData() {
  dataLoading.value = true
  getChannelPageList({ page: pagination.value.current!, size: pagination.value.pageSize!, ...serchFormData }).then((res) => {
    data.value = res.data
    pagination.value = {
      current: res.current,
      pageSize: pagination.value.pageSize,
      total: res.total,
    }
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()

function handleSearchClick() {
  pagination.value = {
    current: 1,
    pageSize: 15,
    total: 0,
  }
  fetchData()
}
const channelFormDialogData = reactive<ChannelFormDialogData>({
  companyName: '',
  phone: '',
  contactPerson: '',
  settType: ChannelSettType.PRE_PAY,
  enabled: EnabledStatus.ENABLED,
})
const channelFormDialogVisible = ref(false)
const editBatchId = ref('')
function handleAddChannelClick() {
  editBatchId.value = ''
  channelFormDialogData.companyName = ''
  channelFormDialogData.phone = ''
  channelFormDialogData.contactPerson = ''
  channelFormDialogData.settType = ChannelSettType.PRE_PAY
  channelFormDialogData.enabled = EnabledStatus.ENABLED
  channelFormDialogVisible.value = true
}
function handleEditChannelClick(row: TableData) {
  editBatchId.value = row.id
  channelFormDialogData.companyName = row.companyName
  channelFormDialogData.phone = row.phone
  channelFormDialogData.contactPerson = row.contactPerson
  channelFormDialogData.settType = row.settType
  channelFormDialogData.enabled = row.enabled
  channelFormDialogVisible.value = true
}

function handleSuccess() {
  pagination.value = {
    current: 1,
    pageSize: 15,
    total: 0,
  }
  fetchData()
}
</script>
<style scoped>
:deep(.t-dialog__body)  {
  overflow: hidden;
}
</style>
